On one welcome.
In this video we are going to add the singer for our project cybercafes email far we've already got
a reference to the externals here says far enough.
Call it hitched come to see assess someone to create that file now by going to file option and clicking
on.
And I'm going to save that to the same directory as the hey team help file some of.
Hey converter.
Same name but change the file extension to see SS and click see.
So I now have a csx file.
If you see on the bottom right here it says see SS I have already priestley's to see SS Somewhere in
and then run through the code with you in the right quick pace.
So this is the CSA So I'm going to start from the top.
So here is the container.
This content is what we are stimy is an idea here so I go into my hastier mail.
You see I've got one quart container which is deep here dastards.
I am applying this styling too so you can see here these are the various properties and values given
to the container.
Giving it a whiff.
Three hundred seventy five pixels.
I will strongly encourage you to play around with these values Tran add your own values so as to customize
it to your own text margin from the left.
This is the left so from the left of the page I want the contain Deve to move 350 pixels and I also
want to move from the top one at a drop down from the top.
This is the top I wanted to move down from the top of the page 65 pixels in the background colour of
black.
This here is black.
If you don't want to use hexadecimal column values you can just put the name on the collar.
If you know the colour you want to use it.
This could have just typed in black padding to the left.
Padding refers to this space inside the element so this place is development while margin refers to
the space outside div element.
Some say the padding inside from the left I want it to move 30 pixels law is white.
This is hex decimal values for the colour white.
So if you want to type in an M alkaline state you can do that.
Here refers to the text so any text you have inside is div will have the colour of whites.
So let's move on to the stylin of the feet.
So we go into to our Tim Farley far you can see this impled field here.
Got an idea your feet.
That's what I am referring to here.
So again I'm giving that input field with hundred and fifty pixels height 25 pixels margin from the
top 30 pixels margin from the left 15 pixels.
Again I've applied the same to the inches I do.
So going to email this input here quad inches.
I've given it the same value.
Next let's move on to the result.
This is where the value of the conversion is going to be posted.
So here we've got a divided court result.
So this is what I'm referring to here.
Given the font size 35 pixels the margin from the left 60 pixels the colour of the text is going to
be yellow.
So moving on to the submit button.
If I click on the TMF I can see we've got an input type submit.
So this is frame to the submit input.
So here again giving me your with off 250 pixels height 35 pixels margin to the left 20 pixels margin
from the top 25 pixels.
Old radios five picks a body radios basically gives gives it a kind of less rounded edge.
So I've given it five pixels so you can also play around with value so you can see how.
Depending on how round you want the edges to be.
Does style have set it on nonso.
Sometimes you can have borders that are have a shadow border shadow on and so on.
I'm just saying here I don't want any styling on the border style so that's why I've said the value
to not giving the background colour of these submit input and giving it read the actual law.
White collar basically refers to the text inside the submit import field here font size under frame
to the full size of the text inside the submit button or submit input.
That's going to be 25 pixels.
Finally what the hey want to hear the hate from basically is this one here.
This is the title of the hall converter and I've given it a pound to the left 15 pixels padding from
the top 25 pixels or padding creates space inside by a margin refers to the space outside.
Inside the container I am giving this space to the left and from the top.
So I'm just going to say this and then quickly run the file so we can see what it looks like.
So let's double click directories here and run his team five times on a double click.
He can see his look in a bit more presentable or done nothing is going to work because we have not added
the javascript functionality in the next lecture.
We are going to be adding the javascript functionality that will do the heavy lifting in making this
converter to work.
Thank you for watching.
Bye for now.